<template>
  <div>
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center">
          <h2>Orders</h2>
          <ul>
            <li><router-link to="/">home</router-link></li>
            <li class="active">Orders</li>
          </ul>
        </div>
      </div>
    </div><!-- shopping-cart-area start -->
    <div class="cart-main-area pt-95 pb-100">
      <div class="container">
        <h3 class="page-title">Your Orders</h3>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="allOrders-tab" data-toggle="tab" href="#allOrders" role="tab" aria-controls="allOrders" aria-selected="true">
              <h6>All Orders</h6>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="delivered-tab" data-toggle="tab" href="#delivered" role="tab" aria-controls="delivered" aria-selected="false">
              <h6>Delivered</h6>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="notShipped-tab" data-toggle="tab" href="#notShipped" role="tab" aria-controls="notShipped" aria-selected="false">
              <h6>Not yet Shipped</h6>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="waitReviewed-tab" data-toggle="tab" href="#waitReviewed" role="tab" aria-controls="waitReviewed"
               aria-selected="false">
              <h6>Waiting to be reviewed</h6>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="goodsRejected-tab" data-toggle="tab" href="#goodRejected" role="tab" aria-controls="goodRejected"
               aria-selected="false">
              <h6>Goods Rejected</h6>
            </a>
          </li>
        </ul>
        <div class="tab-content border border-top-0" id="myTabContent" >
          <!--所有订单选项卡-->
          <div class="tab-pane fade show active" id="allOrders" role="tabpanel" aria-labelledby="allOrders-tab">
            <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                  <div class="table-content table-responsive">
                    <table>
                      <thead>
                      <tr>
                        <th>OrderId</th>
                        <th>BuyerName</th>
                        <th>Order Date</th>
                        <th>Address</th>
                        <th>Total Price</th>
                        <th>Status</th>
                        <th>Operation</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="order in allOrderList">
                        <td><a class="product-name" @click="showOrder(order.itemList,order.orderStatus)" data-toggle="modal" data-target="#myModal">{{order.orderId}}</a></td>
                        <td class="product-name" style="width: 20px;">{{order.username}}</td>
                        <td class="product-price-cart"><span class="amount">{{order.orderDate}}</span></td>
                        <td class="product">{{order.address}}</td>
                        <td class="product">${{order.totalPrice}}</td>
                        <td class="product" v-if="order.orderStatus == 'YF'">delivered</td>
                        <td class="product" v-if="order.orderStatus == 'YS'">receipted</td>
                        <td class="product" v-if="order.orderStatus == 'NF'">unshipped</td>
                        <td class="product" v-if="order.orderStatus == 'YT'">returned</td>
                        <!--确认收货按钮-->
                        <td class="billing-btn">
                          <button @click="ConfirmReceipt(order.orderId)" style="height: 45px;width: 100px;font-size: 5px;" v-if="order.orderStatus=='YF'">Confirm Receipt</button>
                          <p></p>
                          <button @click="CancelOrder(order.orderId)" style="height: 45px;width: 100px;font-size: 5px;" v-if="order.orderStatus != 'YT'">Cancel Order</button>
                          <p v-if="order.orderStatus == 'YT'">Sales Return Successfully.</p>
                        </td>

                      </tr>
                      </tbody>
                    </table>
                  </div>
              </div>
            </div>
          </div>
          <!--已发货选项卡-->
          <div class="tab-pane fade" id="delivered" role="tabpanel" aria-labelledby="delivered-tab">
            <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <form action="#">
                  <div class="table-content table-responsive">
                    <table>
                      <thead>
                      <tr>
                        <th>OrderId</th>
                        <th>BuyerName</th>
                        <th>Order Date</th>
                        <th>Address</th>
                        <th>Total Price</th>
                        <th>Status</th>
                        <th>Operation</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="order in deliveredOrderList">
                        <td class="product-name" @click="showOrder(order.itemList)" data-toggle="modal" data-target="#myModal">{{order.orderId}}</td>
                        <td class="product-name" style="width: 20px;">{{order.username}}</td>
                        <td class="product-price-cart"><span class="amount">{{order.orderDate}}</span></td>
                        <td class="product">{{order.address}}</td>
                        <td class="product">${{order.totalPrice}}</td>
                        <td class="product" v-if="order.orderStatus == 'YF'">delivered</td>
                        <td class="product" v-if="order.orderStatus == 'YS'">receipted</td>
                        <td class="product" v-if="order.orderStatus == 'NF'">unshipped</td>
                        <td class="product" v-if="order.orderStatus == 'YT'">returned</td>
                        <!--确认收货按钮-->
                        <td class="billing-btn">
                          <button @click="ConfirmReceipt(this)" style="height: 45px;width: 100px;font-size: 5px;">Confirm Receipt</button>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <!--未发货选项卡-->
          <div class="tab-pane fade" id="notShipped" role="tabpanel" aria-labelledby="notShipped-tab">
            <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <form action="#">
                  <div class="table-content table-responsive">
                    <table>
                      <thead>
                      <tr>
                        <th>OrderId</th>
                        <th>BuyerName</th>
                        <th>Order Date</th>
                        <th>Address</th>
                        <th>Total Price</th>
                        <th>Status</th>
                        <th>Operation</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="order in notShippedOrderList">
                        <td class="product-name" @click="showOrder(order.itemList)" data-toggle="modal" data-target="#myModal">{{order.orderId}}</td>
                        <td class="product-name" style="width: 20px;">{{order.username}}</td>
                        <td class="product-price-cart"><span class="amount">{{order.orderDate}}</span></td>
                        <td class="product">{{order.address}}</td>
                        <td class="product">${{order.totalPrice}}</td>
                        <td class="product" v-if="order.orderStatus == 'YF'">delivered</td>
                        <td class="product" v-if="order.orderStatus == 'YS'">receipted</td>
                        <td class="product" v-if="order.orderStatus == 'NF'">unshipped</td>
                        <td class="product" v-if="order.orderStatus == 'YT'">returned</td>
                        <!--取消订单按钮-->
                        <td class="billing-btn">
                          <button @click="CancelOrder(this)" style="height: 45px;width: 100px;font-size: 5px;">Cancel Order</button>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <!--待评价发货选项卡-->
          <div class="tab-pane fade" id="waitReviewed" role="tabpanel" aria-labelledby="waitReviewed-tab">
            <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <form action="#">
                  <div class="table-content table-responsive">
                    <table>
                      <thead>
                      <tr>
                        <th>OrderId</th>
                        <th>BuyerName</th>
                        <th>Order Date</th>
                        <th>Address</th>
                        <th>Total Price</th>
                        <th>Status</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="order in waitReviewOrderList">
                        <td class="product-name" @click="showOrder(order.itemList)" data-toggle="modal" data-target="#myModal">{{order.orderId}}</td>
                        <td class="product-name" style="width: 20px;">{{order.username}}</td>
                        <td class="product-price-cart"><span class="amount">{{order.orderDate}}</span></td>
                        <td class="product">{{order.address}}</td>
                        <td class="product">${{order.totalPrice}}</td>
                        <td class="product" v-if="order.orderStatus == 'YF'">delivered</td>
                        <td class="product" v-if="order.orderStatus == 'YS'">receipted</td>
                        <td class="product" v-if="order.orderStatus == 'NF'">unshipped</td>
                        <td class="product" v-if="order.orderStatus == 'YT'">returned</td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <!--退货处理选项卡-->
          <div class="tab-pane fade" id="goodRejected" role="tabpanel" aria-labelledby="goodsRejected-tab">
            <div class="row">
              <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <form action="#">
                  <div class="table-content table-responsive">
                    <table>
                      <thead>
                      <tr>
                        <th>OrderId</th>
                        <th>BuyerName</th>
                        <th>Order Date</th>
                        <th>Address</th>
                        <th>Total Price</th>
                        <th>Status</th>
                        <th>Operation</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="order in rejectedOrderList">
                        <td class="product-name" @click="showOrder(order.itemList)" data-toggle="modal" data-target="#myModal">{{order.orderId}}</td>
                        <td class="product-name" style="width: 20px;">{{order.username}}</td>
                        <td class="product-price-cart"><span class="amount">{{order.orderDate}}</span></td>
                        <td class="product-name">{{order.address}}</td>
                        <td class="product-name">${{order.totalPrice}}</td>
                        <td class="product-name" v-if="order.orderStatus == 'YF'">delivered</td>
                        <td class="product-name" v-if="order.orderStatus == 'YS'">receipted</td>
                        <td class="product-name" v-if="order.orderStatus == 'NF'">unshipped</td>
                        <td class="product-name" v-if="order.orderStatus == 'YT'">returned</td>
                        <!--去评价按钮-->
                        <td>
                          Sales Return Successfully.
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal" >
      <div class="modal-dialog modal-lg" style="width: 80%;">
        <div class="modal-content">
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">Order Content</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <!-- 模态框主体 -->
          <div class="modal-body">
            <table>
              <thead>
              <tr>
                <th style="width: 160px;">ItemId</th>
                <th style="width: 160px;">Image</th>
                <th style="width: 160px;">Product</th>
                <th style="width: 160px;">Quantity</th>
                <th style="width: 160px;">Total Price</th>
                <th style="width: 160px;">Operate</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="order in showOrderList">
                <td class="product-name">{{order.itemId}}</td>
                <td class="product-thumbnail">
                  <router-link :to="{name:'viewItem',query:{itemId:order.itemId,productId:order.productId,catId:order.catId}}">
                    <img :src="order.iImage" alt="" style="width: 70px;height: 70px;" data-dismiss="modal">
                  </router-link>
                </td>
                <td class="product-name" style="width: 20px;">{{order.iName}}</td>
                <td class="product-price-cart">{{order.quantity}}</td>
                <td class="product-price-cart">${{order.price}}</td>
                <!--去评价按钮-->
                <td>
                  <router-link :to="{name:'viewItem',query:{itemId:order.itemId,productId:order.productId,catId:order.categoryId,flag: 1}}">
                    <button @click="EvaluateOrder(order.orderId)" style="height: 45px;width: 100px;font-size: 5px;" v-if="order.orderStatus =='YS'" data-dismiss="modal">To Comment</button>
                  </router-link>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import viewOrders from "../../../static/js/pet/viewOrders";
export default {
  ...viewOrders

}
</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";
@import "../../../static/css/responsive.css";
</style>
